<template>
  <div>
    <el-dialog :title="$t('action.add')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
      <el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.Wendu_wdbillno')" prop="wdbillno">
              <el-input v-model="form.wdbillno" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Wendu_wdbillno')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.Wendu_wdname')" prop="wdname">
              <el-input v-model="form.wdname" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Wendu_wdname')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.Wendu_dybox')" prop="dybox">
              <el-input v-model="form.dybox" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Wendu_dybox')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.Wendu_wdrangel')" prop="wdrangel" >
              <el-input  v-model="form.wdrangel" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Wendu_wdrangel')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.Wendu_wdranger')" prop="wdranger">
              <el-input @change="changeCount()"  v-model="form.wdranger" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Wendu_wdranger')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.Wendu_cfdate')" prop="cfdate">
              <el-input v-model="form.cfdate" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Wendu_cfdate')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" :loading="loading" type="primary" @click="submit" >
          <span v-if="!loading">{{$t('system.confirm')}}</span>
          <span v-else>{{$t('system.submitting')}}</span>
        </el-button>
        <el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add } from '@/api/app/wendu'



export default {
  name:'wenduadd',
  components: {

  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    querys:{
      type:Object,
    },
  },
  data(){
    return {
      dialog:{
      },

      form: {
        wdbillno:'',
        wdname:'',
        dybox:'',
        wdrangel:'',
        wdranger:'',
        cfdate:'',
        creatorId:'',
        modifierId:'',
        auditorId:'',
        createdate:'',
        modifydate:'',
        auditdate:'',
      },
      initial:{},
      loading:false,
      rules: {
        wdrangel:[
          {required: true, message: this.$t('validate.notBlank',{title:this.$t('field.Wendu_wdrangel')}), trigger: 'blur'},
          {pattern: (/^([0-9-]\d*\.?\d{0,2})?.*$/), message:  this.$t('validate.formatError',{title:this.$t('field.Wendu_wdrangel')})}
        ],
        wdranger:[
          {required: true, message: this.$t('validate.notBlank',{title:this.$t('field.Wendu_wdranger')}), trigger: 'blur'},
          {pattern:(/^([0-9-]\d*\.?\d{0,2})*$/), message:  this.$t('validate.formatError',{title:this.$t('field.Wendu_wdranger')})}
        ],
        cfdate:[
          {required: true, message: this.$t('validate.notBlank',{title:this.$t('field.Wendu_cfdate')}), trigger: 'blur'},
          {pattern:/^[0-9]*$/, message:  this.$t('validate.formatError',{title:this.$t('field.Wendu_cfdate')})}
        ],
      }
    }
  },
  watch:{
    show(val){
      if(val){
      }
    }
  },
  methods: {
    changeCount(){
      console.log(this.form)
      if (parseInt(this.form.wdrangel) > parseInt(this.form.wdranger)){
        this.$message.warning('温度范围(右)要大于温度范围(左)');
        this.form.wdrangel = 0
        this.form.wdranger = 0
      }
    },
    open(){
      if(this.querys){
      }
    },
    submit(){
      this.$refs['form'].validate(valid => {
        if(valid) {
          this.loading = true
          add(this.form).then(res => {
            if(res.status == 200){
              this.$message({message: this.$t('system.success'), type: 'success'})
              this.$emit('refresh_list')
              this.closeForm()
            }
          }).catch(()=>{
            this.loading = false
          })
        }
      })
    },
    closeForm(){
      this.$emit('update:show', false)
      this.loading = false
      if (this.$refs['form']!==undefined) {
        this.$refs['form'].resetFields()
      }
    },
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss';
</style>
